<!-- 结清 -->
<template>
	<div>
		<!-- 提示窗 -->
		<uni-popup ref="Dialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="关闭" confirmText="结清" title="确定结清"
				@confirm="DialogConfirm" :before-close="true" @close="closeDialog()">
				<scroll-view scroll-top="0" scroll-y="true" style="height: 300px;">
					<view style="display: flex;flex-direction: column;width: 100%;">
						<view v-if="type==='collection'">
							<view style="display: flex;">
								<text style="width: 75px;">发货方：</text>
								<text>{{list.shipName}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">收货方：</text>
								<text>{{list.deliveryName}}</text>
							</view>
						</view>
						<view v-else>
							<view style="display: flex;">
								<text style="width: 75px;">承运商：</text>
								<text>{{list.carrierName}}</text>
							</view>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">结算状态：</text>
							<text>{{settleStatus_[list.status]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">运单编号：</text>
							<text style="font-weight: bold;">{{list.outCode}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">交易金额(元)：</text>
							<text>{{list.tradeAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">运单状态：</text>
							<text>{{waybillStatus_[list.waybillStatus]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">结算方式：</text>
							<text>{{settlementMode_[list.settlementMode]}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">剩余时间：</text>
							<text>{{list.remainDay?list.remainDay:'--'}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">创建人：</text>
							<text>{{list.createBy}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">创建时间：</text>
							<text>{{parseTime(list.createTime)}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'应收总额(元)':'应付总额(元)'}}：</text>
							<text>{{type==='collection'?list.receivableAmount:list.payableAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'实收金额(元)':'实付金额(元)'}}：</text>
							<text>{{list.realAmount}}</text>
						</view>
						<view style="display: flex;">
							<text style="width: 75px;">{{type==='collection'?'应收余额(元)':'应付余额(元)'}}：</text>
							<text>{{type==='collection'?list.receivableBalance:list.payableBalance}}</text>
						</view>
						<view style="height: 10px;"></view>
					</view>
					<view v-for="(item,index) in formData" :key="index">
						<template><uni-tag style="margin-left: 15px;" :inverted="true" :text="type==='collection'?'付款记录:'+(index+1):'收款记录:'+(index+1)" type="primary" /></template>
						<uni-card :title="type==='collection'?item.payer:item.payee" :sub-title="type==='collection'?'付款人':'收款人'" :extra="accountType_[type==='collection'?item.payerAccountType:item.payeeAccountType]">
							<view style="display: flex;">
								<text style="width: 75px;">{{type==='collection'?'付款人账号':'收款人账号'}}：</text>
								<text>{{type==='collection'?item.payerAccount:item.payeeAccount}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">支付方式：</text>
								<text>{{payChannel_[item.payChannel]}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">支付金额：</text>
								<text>{{item.payAmount}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">付款时间：</text>
								<text>{{parseTime(item.payTime)}}</text>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">支付凭证：</text>
								<previewfilepicker  @clickFile="clickFile_payVoucher"  readonly limit="3"  :value="fileList_payVoucher[index]" file-extname="png,jpg,jpeg" file-mediatype="image"></previewfilepicker>
							</view>
							<view style="display: flex;">
								<text style="width: 75px;">备注：</text>
								<text>{{item.remark}}</text>
							</view>
						</uni-card>
						<!-- <uni-forms labelWidth="75px">
							<uni-forms-item :label="type==='collection'?'付款人':'收款人'" name="payer">
								<text>{{item.payer}}</text>
							</uni-forms-item>
							<uni-forms-item label="账号类型" name="payerAccountType" required>
								<text>{{accountType_[item.collection]}}</text>
							</uni-forms-item>
							<uni-forms-item :label="type==='collection'?'付款人账号':'收款人账号'" name="payerAccount" required>
								<text>{{item.payerAccount}}</text>
							</uni-forms-item>
							<uni-forms-item label="支付方式" name="payChannel" required>
								<text>{{payChannel_[item.payChannel]}}</text>
							</uni-forms-item>
							<uni-forms-item label="支付金额" name="payAmount" required>
								<text>{{item.payAmount}}</text>
							</uni-forms-item>
							<uni-forms-item label="付款时间" name="payTime" required>
								<text>{{parseTime(item.payTime)}}</text>
							</uni-forms-item>
							<uni-forms-item label="支付凭证">
								<previewfilepicker  @clickFile="clickFile_payVoucher"  readonly limit="3"  :value="fileList_payVoucher[index]" file-extname="png,jpg,jpeg" file-mediatype="image"></previewfilepicker>
							</uni-forms-item>
							<uni-forms-item label="备注">
								<text>{{item.remark}}</text>
							</uni-forms-item>
						</uni-forms> -->
					</view>
					<view style="height: 10px;"></view>
				</scroll-view>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {confirmReceivableSettle,receivableRecord} from '@/api/system/receivable.js'
	import {confirmPayableSettle,payableRecord} from '@/api/system/payable.js'
	import {getDicts} from '@/api/system/dict.js'
	import {getFileList} from '@/api/system/uploadFile.js'
	import previewfilepicker from '@/components/my-file-picker.vue'
	export default {
		components: {
			previewfilepicker
		},
		data() {
			return {
				formData:{}, //收款、付款记录
				list:{},
				imageStyles: {
					width: '100%',
					height: 150,
					border: {
						radius: '4px'
					}
				},
				//结算状态
				settleStatus_:[],
				//运单状态
				waybillStatus_:[],
				//结算方式
				settlementMode_:[],
				//账号类型
				accountType_:[],
				//支付方式
				payChannel_:[],
				type:'collection',
				
				//支付凭证
				fileList_payVoucher:[]
			}
		},
		created() {
			//结算状态
			getDicts('settle_status').then(res=>{
				res.data.forEach(item=>{
					this.settleStatus_[item.dictValue]=item.dictLabel
				})
			})
			//运单状态
			getDicts('waybill_status').then(res=>{
				res.data.forEach(item=>{
					this.waybillStatus_[item.dictValue]=item.dictLabel
				})
			})
			//结算方式
			getDicts('settle_type').then(res=>{
				res.data.forEach(item=>{
					this.settlementMode_[item.dictValue]=item.dictLabel
				})
			})
			//账号类型
			getDicts('account_type').then(res=>{
				res.data.forEach(item=>{
					this.accountType_[item.dictValue]=item.dictLabel
				})
			})
			//支付方式
			getDicts('pay_channel').then(res=>{
				res.data.forEach(item=>{
					this.payChannel_[item.dictValue]=item.dictLabel
				})
			})
		},
		computed: {
			parseTime() {
			   return function (time) {
			        let dateee = new Date(time).toJSON();
			        let date = new Date(+new Date(dateee)+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,'')  
			        return date
			    }
			 }
		},
		methods: {
			//预览支付附件
			clickFile_payVoucher(e){
				if(e.tempFile.extname=='png'||e.tempFile.extname=='jpg'||e.tempFile.extname=='jpeg')  //预览图片
				{
					uni.previewImage({
					    current: 0, //预览图片的下标
					    urls: [e.tempFile.url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
					})
				}
				else  //pdf,png,gif,jpg,doc
				{
					uni.navigateTo({
						url: "/pages/common/fileView",
						success: (res) => {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit("dataFun", {
								data: {
									name: e.tempFile.name+'预览',
									fileSrc: e.tempFile.url,
									isFileDown: true
								},
							});
						},
					});
				}
			},
			//关闭弹窗
			closeDialog(){
				this.formData=[]
				this.$refs.Dialog.close()
			},
			//打开弹窗
			open(item,type){
				this.list=item
				this.type=type
				if(type==='collection')
				{
					// 查询收款记录
				    receivableRecord(item.id).then(res => {
						this.formData = res.data||[]
					  //支付凭证列表回显
					  if(this.formData.length!==0)
					  {
					  	this.formData.forEach((item,index)=>{
					  		if(item.payVoucher!==null)
					  		{
					  			let AllFileUrl=[];
					  			AllFileUrl=item.payVoucher.split(",")
					  			getFileList(AllFileUrl).then(res2=>{
					  				this.fileList_payVoucher[index]= res2.data.map((item2,index)=>{
					  					return {
					  						id:item2.id,
					  						url: item2.url,
					  						extname: item2.fileType,
					  						name: item2.name,
					  					}
					  				})
									this.$forceUpdate()
					  			})
					  		}
					  	})
					  }
				    }).finally(() => {
						
				    });
				}
				else
				{
					// 查询付款记录
					payableRecord(item.id).then(res => {
					  this.formData = res.data||[]
					  //支付凭证列表回显
					  if(this.formData.length!==0)
					  {
					  	this.formData.forEach((item,index)=>{
					  		if(item.payVoucher!==null)
					  		{
					  			let AllFileUrl=[];
					  			AllFileUrl=item.payVoucher.split(",")
					  			getFileList(AllFileUrl).then(res2=>{
					  				this.fileList_payVoucher[index]= res2.data.map((item2,index)=>{
					  					return {
					  						id:item2.id,
					  						url: item2.url,
					  						extname: item2.fileType,
					  						name: item2.name,
					  					}
					  				})
									this.$forceUpdate()
					  			})
					  		}
					  	})
					  }
					}).finally(() => {
						
					});
				}
				this.$refs.Dialog.open()
			},
			//确认结清
			DialogConfirm(){
				uni.showLoading({
					title: '结清中...',
				})
				if(this.type==='collection')
				{
					//收款结清
					confirmReceivableSettle(this.list.id).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '结清成功',
								icon: 'none'
							})
							this.closeDialog()
							this.$parent.getCollectionList()  //调用父组件的getCollectionList函数，重新加载数据
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}	
					})
				}
				else
				{
					//付款结清
					confirmPayableSettle(this.list.id).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '结清成功',
								icon: 'none'
							})
							this.closeDialog()
							this.$parent.getPaymentList()  //调用父组件的getCollectionList函数，重新加载数据
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}	
					})
				}
			},
		},
	}
</script>

<style scoped>

</style>